<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">
				欢迎回来！
			</view>
			<view class="input-content">
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
					<u-form-item label="电话" prop="userInfo.userName" ref="item1">
						<u--input v-model="model1.userInfo.userName" border="none" placeholder="请输入手机号"></u--input>
					</u-form-item>

					<u-form-item v-if="!isPhone" label="密码" prop="userInfo.password" ref="item1">
						<u--input v-model="model1.userInfo.password" border="none" placeholder="请输入密码"></u--input>
					</u-form-item>

					<u-form-item v-else label="验证码" prop="userInfo.code" ref="item1" labelWidth="60">
						<div class="itemDiv">
							<u--input v-model="model1.userInfo.code" border="none" placeholder="请输入验证码"></u--input>
							<div>
								<button @click="getCode" v-if="!isCode">获取验证码</button>
								<button v-else
									style="width: 50px;display: flex;align-items: center;justify-content: center;">
									<u-count-down :time="time" format="ss" @finish="finishData"></u-count-down>
								</button>
							</div>
						</div>
					</u-form-item>
				</u--form>
			</view>
			<button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
			<div style="padding: 0 50rpx;font-size: 14px;margin-top: 20rpx;text-align: center;">
				<!-- #ifdef MP -->
				<button v-if="!isPhone" open-type="getPhoneNumber" @getphonenumber="oneClickLogin">
					手机号一键登录
				</button>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<span v-if="!isPhone" @click="isPhone=!isPhone">验证码登录</span>
				<!-- #endif -->
				<span v-else @click="isPhone=!isPhone">密码登录</span>
			</div>
			<!-- #ifdef H5 -->
			<p style="text-align: center;margin-top: 20rpx;color: #666;font-size: 12px;">新用户请使用验证码登录</p>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<p style="text-align: center;margin-top: 20rpx;color: #666;font-size: 12px;">新用户请使用手机号一键登录</p>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		getLogin,
		sendCode,
		loginWechat,
		decryptPhone
	} from '../../api/index.js'
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				logining: false,
				// 用户信息
				userData: {},
				// 密码和验证码切换
				isPhone: false,
				// 表单
				model1: {
					userInfo: {
						userName: '',
						password: '',
						code: ""
					},
				},
				rules: {
					'userInfo.userName': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'userInfo.password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'userInfo.code': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},
				},
				// 获取验证码
				code: '',
				isCode: false,
				time: 60 * 1000,
				regex: /^1[3-9]\d{9}$/

			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login']),
			oneClickLogin(e) {
				let that = this
				that.logining = true;

				uni.login({
					provider: 'weixin',
					success: async function(loginRes) {
						// 获取用户信息
						let par1 = {
							code: loginRes.code
						}
						let res = await loginWechat(par1)
						if (res.code == 200) {
							let pars = {
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv,
								openId: res.data.openid,
								sessionKey: res.data.sessionKey
							}
							let str = await decryptPhone(pars)
							if (str.code == 200) {
								let par = {
									phone: str.data.phoneNumber,
									type: 2, //1手机验证码，0手机号和密码，2为手机号一键登录
									openId: res.data.openid,
								}
								let re = await getLogin(par)
								if (re.code == 200) {
									let userPar = {
										...re.data
									}
									that.login(userPar)
									setTimeout(() => {
										that.logining = false;
										uni.navigateBack();
									}, 1000)
								}
							}
						}

					}
				});

			},
			// 获取验证码
			async getCode() {
				if (this.regex.test(this.model1.userInfo.userName)) {
					this.isCode = true
					let par = {
						label: "login",
						phone: this.model1.userInfo.userName
					}
					let res = await sendCode(par)
					if (res.code == 200) {
						let str = res.msg.split("：")
						this.code = str[1]
						console.log(this.code);
					}

				} else {
					wx.showToast({
						title: '请输入正确手机号',
						icon: 'error',
						duration: 2000
					})
				}

			},
			// 倒计时停止滚动
			finishData() {
				this.isCode = false
			},
			// 返回
			navBack() {
				uni.navigateBack();
			},
			// 登录
			async toLogin() {
				let that = this
				that.$refs.uForm.validate().then((res) => {
					that.logining = true;
					let par = {
						userName: this.isPhone ? "" : this.model1.userInfo.userName,
						password: this.isPhone ? "" : this.model1.userInfo.password,
						phone: this.isPhone ? this.model1.userInfo.userName : '',
						code: this.model1.userInfo.code,
						type: this.isPhone ? '1' : '0', //1手机验证码，0手机号和密码，2为手机号一键登录
						label: this.model1.userInfo.code ? "login" : ""
					}
					getLogin(par).then(res => {
						if (res.code == 200) {
							// #ifdef H5
							wx.showToast({
								title: '登录成功',
								icon: 'success',
								duration: 1000
							})
							let pars = {
								...res.data,
							}
							that.login(pars)
							setTimeout(() => {
								that.logining = false;
								uni.navigateBack();
							}, 1000)
							// #endif
							// #ifdef MP
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									wx.showToast({
										title: '登录成功',
										icon: 'success',
										duration: 1000
									})
									let pars = {
										...res.data,
									}
									that.login(pars)
									setTimeout(() => {
										that.logining = false;
										uni.navigateBack();
									}, 1000)
								}
							});
							// #endif

						}
					})
				}).catch(errors => {
					console.log(errors);
				})
			},
		},

	}
</script>

<style lang='scss'>
	.u-form-item__body {
		display: flex;
		flex-direction: column !important;
		align-items: flex-start;
		justify-content: center;
		padding: 20rpx 30upx !important;
		background: $page-color-light;
		/* height: 120upx; */
		border-radius: 4px;
		margin-bottom: 50upx;
		border: none;

		.itemDiv {
			display: flex;
			align-items: center;
			justify-content: space-between;

			button {
				width: 180rpx;
				font-size: 12px;
				margin: 0;
				margin-bottom: 10rpx;
			}
		}
	}

	.u-form-item__body__right__message {
		margin-top: -40rpx;
		margin-bottom: 20rpx;
	}

	page {
		background: #fff;
	}

	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}

	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}

	.input-content {
		padding: 0 60upx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		/* height: 120upx; */
		border-radius: 4px;
		margin-bottom: 50upx;



		button {
			width: 150px;
		}

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
	}

	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 50upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}
	}

	.forget-section {
		font-size: $font-sm+2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm+2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
</style>